<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 文墨勘</title>
    <script src="https://unpkg.byted-static.com/coze/space_ppt_lib/1.0.3-alpha.12/lib/tailwindcss.js"></script>
    <script src="https://unpkg.byted-static.com/fortawesome/fontawesome-free/6.7.2/js/all.min.js" data-auto-replace-svg="nest"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#F4EFEB',
                        secondary: '#EAD2BE', 
                        accent: '#70533B',
                        'text-primary': '#2D2D2D',
                        'text-secondary': '#6B7280',
                        'bg-card': '#FFFFFF',
                        'border-light': '#F3F4F6'
                    },
                    fontFamily: {
                        'chinese': ['-apple-system', 'BlinkMacSystemFont', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.04)',
                        'button': '0 4px 12px rgba(112, 83, 59, 0.15)'
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .card-hover:active {
            transform: scale(0.98);
            transition: transform 0.1s ease;
        }
        
        .nav-item-active {
            color: #70533B;
        }
        
        .safe-bottom {
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        .status-bar {
            height: env(safe-area-inset-top, 44px);
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .menu-item:active {
            background-color: #F9F7F5;
        }
    </style>
</head>
<body class="bg-primary font-chinese">
    <!-- iOS状态栏 -->
    <div id="status-bar" class="status-bar flex justify-between items-center px-6 text-sm font-medium text-accent">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div id="main-content" class="min-h-screen pb-20">
        <!-- 顶部标题区域 -->
        <header id="page-header" class="gradient-bg px-6 py-8">
            <div id="header-content" class="flex items-center">
                <button id="back-button" class="mr-4 w-10 h-10 bg-bg-card rounded-full flex items-center justify-center shadow-card">
                    <i class="fas fa-arrow-left text-accent"></i>
                </button>
                <h1 id="page-title" class="text-2xl font-bold text-accent">个人中心</h1>
            </div>
        </header>

        <!-- 用户信息卡片 -->
        <section id="user-info-section" class="px-6 -mt-8 mb-8">
            <div id="user-info-card" class="bg-bg-card rounded-2xl p-6 shadow-card">
                <div id="user-avatar-section" class="flex items-center mb-6">
                    <div id="user-avatar" class="w-20 h-20 bg-secondary rounded-full flex items-center justify-center mr-4">
                        <i class="fas fa-user text-accent text-2xl"></i>
                    </div>
                    <div id="user-details">
                        <h2 id="user-name" class="text-xl font-semibold text-text-primary mb-1">文墨用户</h2>
                        <p id="user-email" class="text-sm text-text-secondary">user@wenmokan.com</p>
                        <p id="user-join-date" class="text-xs text-text-secondary mt-1">加入时间：2024年1月</p>
                    </div>
                </div>
                
                <div id="user-stats" class="grid grid-cols-3 gap-4 pt-4 border-t border-border-light">
                    <div id="stat-documents" class="text-center">
                        <div class="text-lg font-bold text-accent">12</div>
                        <div class="text-xs text-text-secondary">已校对文稿</div>
                    </div>
                    <div id="stat-words" class="text-center">
                        <div class="text-lg font-bold text-accent">256K</div>
                        <div class="text-xs text-text-secondary">校对字数</div>
                    </div>
                    <div id="stat-accuracy" class="text-center">
                        <div class="text-lg font-bold text-accent">98.5%</div>
                        <div class="text-xs text-text-secondary">准确率</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 功能菜单 -->
        <section id="menu-section" class="px-6 mb-8">
            <div id="menu-card" class="bg-bg-card rounded-2xl shadow-card overflow-hidden">
                <!-- 术语库管理 -->
                <button id="menu-term-manage" class="w-full flex items-center justify-between p-4 menu-item border-b border-border-light">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center mr-3">
                            <i class="fas fa-book text-accent"></i>
                        </div>
                        <div class="text-left">
                            <h3 class="font-medium text-text-primary">术语库管理</h3>
                            <p class="text-xs text-text-secondary">添加和管理专业术语</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-text-secondary"></i>
                </button>

                <!-- 帮助与指南 -->
                <button id="menu-help-guide" class="w-full flex items-center justify-between p-4 menu-item">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-secondary rounded-xl flex items-center justify-center mr-3">
                            <i class="fas fa-question-circle text-accent"></i>
                        </div>
                        <div class="text-left">
                            <h3 class="font-medium text-text-primary">帮助与指南</h3>
                            <p class="text-xs text-text-secondary">使用教程和常见问题</p>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right text-text-secondary"></i>
                </button>
            </div>
        </section>

        <!-- 应用信息 -->
        <section id="app-info-section" class="px-6 mb-8">
            <div id="app-info-card" class="bg-bg-card rounded-2xl p-4 shadow-card">
                <div id="app-version" class="flex items-center justify-between">
                    <span class="text-sm text-text-secondary">应用版本</span>
                    <span class="text-sm text-text-primary">v1.0.0</span>
                </div>
                <div id="app-build" class="flex items-center justify-between mt-3 pt-3 border-t border-border-light">
                    <span class="text-sm text-text-secondary">构建版本</span>
                    <span class="text-sm text-text-primary">20240115</span>
                </div>
            </div>
        </section>
    </div>

    <!-- 底部导航栏 -->
    <nav id="bottom-nav" class="fixed bottom-0 left-0 right-0 bg-bg-card border-t border-border-light flex justify-around items-center h-16 px-2 safe-bottom z-40">
        <a id="nav-home" href="P-HOME.html" class="flex flex-col items-center p-2 text-text-secondary">
            <i class="fas fa-home text-xl"></i>
            <span class="text-xs mt-0.5">首页</span>
        </a>
        <a id="nav-files" href="P-FILE_MANAGE.html" class="flex flex-col items-center p-2 text-text-secondary">
            <i class="fas fa-folder text-xl"></i>
            <span class="text-xs mt-0.5">文件管理</span>
        </a>
        <a id="nav-profile" href="#" class="flex flex-col items-center p-2 nav-item-active">
            <i class="fas fa-user text-xl"></i>
            <span class="text-xs mt-0.5">个人中心</span>
        </a>
    </nav>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 返回按钮点击事件
            document.querySelector('#back-button').addEventListener('click', function() {
                window.location.href = 'P-HOME.html';
            });

            // 术语库管理点击事件
            document.querySelector('#menu-term-manage').addEventListener('click', function() {
                window.location.href = 'P-TERM_MANAGE.html';
            });

            // 帮助与指南点击事件
            document.querySelector('#menu-help-guide').addEventListener('click', function() {
                window.location.href = 'P-HELP_GUIDE.html';
            });

            // 底部导航栏点击事件
            document.querySelector('#nav-home').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-HOME.html';
            });

            document.querySelector('#nav-files').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-FILE_MANAGE.html';
            });

            document.querySelector('#nav-profile').addEventListener('click', function(e) {
                e.preventDefault();
                // 已在个人中心页面，无需操作
            });
        });
    </script>
</body>
</html>